<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery-1.8.2.min.js"></script>
</head>
<body>
<div class="container">
    <form>
    <div class="col-md-4"><img src="" alt="" id="img" width="300px" height="300px"></div>
    <div class="col-md-8">
            <div><input type="text" name="subject" id="goodsNameHidden" hidden></div>
            <div><input type="text" name="totalAmount" id="goodsPriceHidden" hidden></div>
            <div><input type="text" name="body" id="bargainingName" hidden></div>

        <div><span id="goodsName" style="font-size: 30px"></span></div>
        <div style="font-size: 20px">原价:<span id="goodsPrice"></span>元</div>
        <div style="font-size: 20px">最低可以砍至:<span id="floorPrice"></span>元</div>
        <div style="font-size: 20px">当前价格:<span id="price" style="color: red;font-size: 30px"></span>元</div>
        <div><span id="yewBuy" style="font-size: 20px"></span></div>
    </div>
    </form>
    <div>
        <button class="btn btn-warning" id="share">复制链接</button>
        <input type="button" value="购买商品" class="btn btn-success" id="buy">
    </div>

</div>
</body>
<script>
    $.post(
        "/order/echo",
        function (a) {
            $("#img").attr("src",a.goodsImg);
            $("#goodsName").html(a.goodsName);
            $("#goodsPrice").html(a.goodsPrice);
            $("#price").html(a.price);
            $("#floorPrice").html(a.floorPrice);
            $("#goodsNameHidden").val(a.goodsName);
            $("#goodsPriceHidden").val(a.price);
            $("#bargainingName").val(a.bargainingName);
            $.post(
                "/record/link",
                {"orderId":a.orderId},
                function (a) {
                    $("#share").val(a);
                }
            )
            if (a.price==a.floorPrice){
                $("#buy").attr("disabled",false);
                $("#yewBuy").html("当前商品已砍至最低价，您可以进行购买");
            }else {
                $("#buy").attr("disabled",true);
            }
        }
    )

    const oBtn = document.querySelector('#share');
    oBtn.onclick = (e) => {
        const text = document.querySelector('#share').value;
        /*select() 方法用于选择该元素中的文本，
          元素的disabled属性会让select方法失效，
          所以重新创建了一个input
        */
        const oInput = document.createElement('input');

        alert("分享链接已复制到剪贴板");
        oInput.value = text
        document.body.appendChild(oInput)
        //选中新的input里面的值
        oInput.select();
        //执行复制命令
        document.execCommand("copy");
        document.body.removeChild(oInput);
    }

    $("#buy").click(function () {
        location = "/ali/pay?"+$("form").serialize();
    })

</script>
</html>
